<template>
  <div id="picturePreview" v-if="isShow" class="c-h100vh c-w100 c-pf c-p-t0 c-p-l0 c-pz10000">
    <div id="masker" class="c-w100 c-h100vh c-bg-white c-pt60 c-textAlign-c" @click="closeModal">
      <swiper :options="picturePreviewOption" class="c-center c-text-hidden" ref="pictures">
        <swiper-slide v-for="(item, index) in options.imgUrlArr" :key="index" class="c-w100">
          <img class="c-w100 c-h100vh c-object-fit-c" :src="$addXossFilter(item)" />
        </swiper-slide>
      </swiper>
      <div class="c-fc-white c-textAlign-c c-pa c-p-l0 c-p-r0 c-mlr-auto c-p-t60 c-pz100" v-if="options.isShowNumber">
        <span class="c-fs26 c-bg-black5 c-pv6 c-ph40 c-br28 c-inlineblack">{{options.activeIndex + 1}}/{{options.imgUrlArr.length}}</span>
      </div>
      <div class="c-fc-white c-textAlign-c c-pa c-p-l0 c-p-r0 c-mlr-auto c-p-b60 c-pz100" v-if="options.isShowTitle && options.title && options.title.length > 0">
        <span class="c-fs26 c-bg-black5 c-pv6 c-ph40 c-br28 c-inlineblack">{{options.title[options.activeIndex]}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
let index = 0 // 每次重新打开轮播都会走一次init，防止被初始化，记录上次索引
export default {
  components: {
    swiper,
    swiperSlide
  },
  name: 'picturePreview',
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Object,
      default: () => {
        return {
          imgUrlArr: [], // 图片
          isShowNumber: false, // 是否展示图片索引
          activeIndex: 0, // 图片默认索引
          title: [], // 图片解释
          isShowTitle: false, // 是否展示图片解释
          slideChange: null, // 图片切换回调
        }
      }
    },
  },
  watch: {
    options() {
      this.$nextTick(() => {
        let swiper = this.$refs.pictures.swiper;
        swiper.slideTo(this.options.activeIndex, 0, false);
        index = this.options.activeIndex;
      })
    }
  },
  created() {
    index = 0;
    let that = this;
    that.picturePreviewOption = {
      effect: 'slide',
      loop: that.options.imgUrlArr && that.options.imgUrlArr.length > 1,
      slidesPerView: 'auto',
      zoom: {
        containerClass: 'swiper-slide',
      }, //开启缩放功能
      on: {
        init: function () {
          that.$nextTick(() => {
            let swiper = that.$refs.pictures.swiper;
            swiper.slideTo(index, 0, false);
          })
        },
        slideChange: function () {
          that.$nextTick(() => {
            let swiper = that.$refs.pictures.swiper;
            that.options.activeIndex = swiper.realIndex;
            index = that.options.activeIndex;
            if (that.options.slideChange) {
              that.options.slideChange(swiper.realIndex);
            }
            
          })
        }
      }
    }
  },
  methods: {
    closeModal() {
      this.isShow = false;
    },
  }
};
 </script>

<style scoped>
.c-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  height: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  overflow: visible;
}
#picturePreview * {
  touch-action: none;
}
.c-bg-black5 {
  background-color: rgba(0, 0, 0, 0.5);
}
#masker >>> .swiper-wrapper {
  height: auto;
}
</style>
